<template>
   <div class="container full">
    <div class="content login">
      <img class="logo" src="../assets/logo.png">
      <div class="login-form">
        <div class="form-item">
          <span class="icon icon-zhanghao"></span>
          <input type="text" v-model="loginname" placeholder="请输入账号">
        </div>
        <div class="form-item">
          <span class="icon icon-mima"></span>
          <input type="password" v-model="pass" placeholder="请输入密码">
        </div>
        <Btn value="登录" :disable="!valid.r" @onclick="login()"></Btn>
      </div>
    </div>
  </div>
</template>

<script>
import Btn from "@/components/Btn.vue";
import { mapActions } from "vuex";
import axios from "axios";

export default {
  name: "login",
  components: {Btn},
  data() {
    return {
      loginname: "",
      pass: "",
      // 是否在加载中
      isLoading: false,
      // 是否加载完成
      isLoaded: false,
    };
  },
  computed: {
    valid() {
      if (this.loginname.length === 0) {
        return { r: false, msg: "请输入账号" };
      }
      if (this.pass.length < 6) {
        return { r: false, msg: "密码格式不正确" };
      }
        return { r: true, msg: "" };
    }
  },
  methods: {
    ...mapActions([
      "setUserInfo"
    ]),
    login() {
      if (!this.valid.r) {
        this.$toast(this.valid.msg);
        return;
      }
        this.$loading("登录中...");
      axios
        .get("/sellgl/sellgl!login.action", {
          params: {
            loginname: this.loginname,
            pass: this.pass
          }
        })
        .then(response => {
          this.$loading.close();
          if(response.data.state === 1) {
            this.$toast('账号或密码错误');
          } else {
            this.setUserInfo(response.data);
            this.$router.replace('/');
            this.$toast('登录成功');
          }
        })
        .catch(function(error) {
          window.console.log(error);
        });
    }
  }
};
</script>

<style lang="scss">
@import "../assets/basic.scss";

.login {
  .logo {
    display: block;
    width: 100px;
    margin: 100px auto 0;
  }
}
.login-form {
  margin: 3rem 1rem 0;
  .form-item {
    height: 3rem;
    margin-bottom: 1rem;
    position: relative;
    .icon {
      position: absolute;
      font-size: 1.8rem;
      top: 0.5rem;
      left: 0.5rem;
    }
    input {
      display: block;
      width: 100%;
      height: 100%;
      border: 0;
      padding-left: 3rem;
      font-size: 1rem;
      &:active,
      &:focus{
        outline: none;
      }
    }
  }
  .btn {
    margin-top: 3rem;
  }
}
</style>
